﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this sample, Split Panels are dynamically loaded with Ajax </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = "";

            // Create jqxSplitter.
            $('#jqxSplitter').jqxSplitter({ width: 580, height: 300, theme: theme, panels: [{size: '50%'}, {size: '50%'}] });

            var loadPage = function (url, tabIndex) {
                $.get(url, function (data) {
                    $('#content' + tabIndex).html('<div style="overflow: auto; width: 100%; height: 100%;">' + data + '</div>');
                });
            }

            loadPage('pages/ajax1.htm', 1);
            loadPage('pages/ajax2.htm', 2);
        });
    </script>
</head>
<body class='default'>
        <div id='jqxSplitter'>
            <div id="content1">
                <img src='../../images/ajax-loader.gif' />
            </div>
            <div id="content2">
                <img src='../../images/ajax-loader.gif' />
            </div>
        </div>
</body>
</html>
